<script setup>

</script>

<template>
  <div class="app">
    <div class="title">
      <h2><b>基础信息</b></h2>
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item label="姓名" prop="name" class="input">
          <el-input v-model="form.name" placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber" class="input">
          <el-input v-model="form.phoneNumber" placeholder="请输入手机号码"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="iDCardNumber" class="input">
          <el-input v-model="form.iDCardNumber" placeholder="请输入身份证号"/>
        </el-form-item>
        <el-form-item label="性别" prop="gender" class="">
          <el-select v-model="form.gender" placeholder="请输入性别">
            <el-option label="请选择" value=""></el-option>
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="驾驶证类型" prop="licenseType" class="">
          <el-select v-model="form.licenseType" placeholder="请选择">
            <el-option label="请选择" value=""></el-option>
            <el-option label="A1" value="A1"></el-option>
            <el-option label="A2" value="A2"></el-option>
            <el-option label="B1" value="B1"></el-option>
            <el-option label="B2" value="B2"></el-option>
            <el-option label="C1" value="C1"></el-option>
            <el-option label="C2" value="C2"></el-option>
            <el-option label="C3" value="C3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="驾照有效期" prop="licenseExpiryDate" class="">
          <el-date-picker clearable
                          v-model="form.licenseExpiryDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择驾照有效期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="所属承运商" >
          <el-select v-model="form.cid" placeholder="请选择" clearable>
            <el-option
              v-for="option in options"
              :key="option.id"
              :label="option.companyName+' '+option.carrierID"
              :value="option.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="家庭住址" prop="homeAddress" class="zhu ">
          <el-input v-model="form.homeAddress" placeholder="请输入家庭住址"/>
        </el-form-item>

        <el-form-item label="紧急联系人" prop="emergencyContactName" class="input ">
          <el-input v-model="form.emergencyContactName" placeholder="请输入紧急联系人"/>
        </el-form-item>

        <el-form-item label="紧急联系人电话" prop="emergencyContactPhone" class="input ">
          <el-input v-model="form.emergencyContactPhone" placeholder="请输入紧急联系人电话"/>
        </el-form-item>
        <!--        <el-form-item label="状态" class="">-->
        <!--          <el-radio-group v-model="form.status">-->
        <!--            <el-radio label="启用"></el-radio>-->
        <!--            <el-radio label="停用"></el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->

<!--        <el-form-item label="图片上传">-->
<!--          <el-upload-->
<!--            v-model="form.iDPhoney"-->
<!--            :on-success="onUploadSuccess"-->
<!--            :before-upload="beforeUpload"-->
<!--            :on-preview="onUploadPreview"-->
<!--            :on-remove="onUploadRemove"-->
<!--            :multiple="true"-->
<!--            :action="BASE_API+'/pricture/fileUpload'"-->
<!--            class="upload-demo"-->
<!--            list-type="picture-card"-->
<!--            :file-list="fileList">-->
<!--            <i class="el-icon-plus"/>-->
<!--            <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2MB</div>-->
<!--          </el-upload>-->
<!--          <el-image-->
<!--            :src="form.iDPhoney"-->
<!--            style="width: 150px;height:150px;left: 170px;top: -0px;position: absolute"-->
<!--          ></el-image>-->
<!--        </el-form-item>-->


        <el-form-item label="备注信息" prop="remarks" class="zhu ">
          <el-input v-model="form.remarks" placeholder="请输入备注信息"/>
        </el-form-item>
      </el-form>
    </div>


    <div class="bao">
      <el-button type="primary" @click="submitForm()">保存</el-button>
      <el-button @click="cancel()">取消</el-button>
    </div>

  </div>


</template>
<style>
.bao {
  text-align: right;
  padding: 100px;
}

.title {
  margin-left: 50px;
}

.input {
  width: 300px;
}

.zhu {
  width: 600px;
}
</style>


<script>

import {
  addDrivermanagement,
  getDrivermanagement, listDrivermanagement,
  updateDrivermanagement
} from "@/api/drivermanagement/drivermanagement";
import {listCarriermangement} from "@/api/carriermangement/carriermangement";

export default {
  name: "Drivermanagement",

  data() {
    return {
      fileList: [],
      empPosterList: [],
      empImagesList: [],
      empAttrValueList: [],
      employeeStatus: false,// 初始状态为禁用
      // 图片预览对话框
      dialogImageVisible: false,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      BASE_API: 'http://localhost:8803',
      // 表单参数
      form: {
        cid:''
      },
      options:[],

      // 表单校验
      rules: {},



    };
  },
  created() {
    listCarriermangement().then(response => {
      this.options = response.rows
    })
    // this.getList();
    console.log(this.$route.query.id + "....." + (this.$route.query.id !== undefined))
    if (this.$route.query.id !== undefined) {
      this.findCustomer();
      this.fileList = this.form.iDPhoney;
    }
  },

  methods: {

    cancel() {
      this.$router.push({path: '/drivermanagementqu'})
    },
    findCustomer() {
      var id = this.$route.query.id;
      getDrivermanagement(id).then(response => {
        this.form = response.data;
      });
    },


    /** 保存按钮 */
    submitForm() {
      const attrListArray = []
      this.empAttrValueList = attrListArray
      if (this.empImagesList.length > 0) {
        this.imgUrl = this.empImagesList[0].imgUrl
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateDrivermanagement(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              // this.open = false;
              // this.getList();
              this.$router.push({path: '/drivermanagementindex'})
            });
          } else {
            this.empAttrValueList = attrListArray
            if (this.empImagesList.length > 0) {
              this.imgUrl = this.empImagesList[0].imgUrl
            }
            addDrivermanagement(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              // this.open = false;
              // this.getList();
              this.$router.push({path: '/drivermanagementindex'})
            });
          }
        }
      });
    },

// 删除上传的文件
    onUploadRemove(file, fileList) {
      var list = []
      this.empImagesList.forEach(item => {
        if (file.url != item.imgUrl) {
          list.push(item)
        }
      })
      this.empImagesList = list
    },
    // 上传图片成功的回调
    onUploadSuccess(res, file) {
      console.log(res, file);
      this.form.iDPhoney = res;
      // 填充上传文件列表
      this.empImagesList.push({
        imgName: file.name,
        imgUrl: file.response.data
      })
    },
    // 文件上传限制条件
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG && !isGIF) {
        this.$message.error('上传头像图片只能是 JPG、PNG 或 GIF 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    // 上传的文件预览
    onUploadPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogImageVisible = true
    },

  }
};

</script>
